<template>
	<view>
		<!-- ====== 状态栏 statusBar  -->
		<view class="public_header flex_spaceBetween">

			<image :src="logo" class="public_header_logo" mode="heightFix"></image>
			<div class="mobleMenu_button flex_center">
				<button class="mobleLines_button public_button flex_center" @click="showMenuBtn">
					<!-- <span class="mobleLines"></span> -->
					菜单
				</button>
			</div>
		</view>
		<!-- ====== 状态栏 end  -->

		<u-popup v-model="isShowMenu" mode="top" :custom-style="customStyle">
			<view v-for="(item,index) in menuList" :key="index" class="width92">
				<button class="public_button menuLeft " @click="navigatoPage(item)" v-if="item.type== 1">
					{{item.name}}
				</button>
				<view class=" menuLeft" v-if="item.type== 0" >
					<view class="flex_spaceBetween" @click="getChildrenMenu(item)">
						<button class="public_button  ">
							{{item.name}}
						</button>
						<u-icon :name="item.showMenu == true?'arrow-up':'arrow-down'" color="#666" size="36"></u-icon>
					</view>
					<view class="menuLeft_children" v-show="item.childMenu.length > 0 && item.showMenu == true">
						<view class="flex_spaceBetween" v-for="(child) in item.childMenu" :key="child.id" @click="navigatoPageChild(child)">
							<button class="public_button  ">
								{{child.name}}
							</button>
						</view>
					</view>


				</view>
			</view>
		</u-popup>
		
		<!-- ====== 右侧侧边栏 start ======-->
		<view class="public_sildbar">
			<button class="public_button flex_center" open-type="im" :data-im-id="imId">
				<image :src="customerServiceIcon"></image>
			</button>
			<button class="public_button flex_center" @click="tapMakePhoneCall">
				<image :src="customerTelIcon"></image>
			</button>
			<button class="public_button flex_center" @click="navigatoPageOrderList">
				<image :src="orderIcon"></image>
			</button>
		</view>
		<!-- ====== 右侧侧边栏 end ======-->
		
		<un-login-popup :isShow="showLoginPop" @close="closeDialog"></un-login-popup>

	</view>
</template>

<script>
	export default {
		name: "navBar",

		data() {
			return {
				customerServiceIcon: this.$staticImgurl + 'customer_service.png',
				customerTelIcon: this.$staticImgurl + 'customer_tel.png',
				orderIcon: this.$staticImgurl + 'order.png',
				
				isShowMenu: false, //是否显示菜单按钮
				logo: this.$staticImgurl + "logo.png",
				customStyle: {
					"margin-top": "120rpx"
				},
				menuList: [], //左侧菜单
				showLoginPop:false,//是否显示未登录弹窗
				customerTel:"",//在线联系客服电话
				imId:'97071766869'
			};
		},
		mounted() {
			this.getQueryMenu(); //获取左侧菜单
			this.getDictType();//获取在线客服联系电话
		},
		methods: {
			//获取在线客服联系电话
			getDictType(){
				this.$api.get(this.$url.common +"sys_tel_type").then(res=>{
					if(res.code == 200){
						console.log(res.data)
						this.customerTel = res.data[0].dictValue;
						console.log(this.customerTel)
					}
				})
			},
			//关闭未登录弹窗
			closeDialog(){
				this.showLoginPop = false;
			},
			//获取左侧菜单
			getQueryMenu() {

				this.$api.post(this.$url.queryMenu, {
					menuLocation: 1,
					parentId: 0
				}).then(res => {
					if (res.code == 200) {
						res.data.map(val => {
							val.childMenu = [];
							val.showMenu = false;
						})

						this.menuList = res.data;

					}
				})
			},
			showMenuBtn() {
				this.isShowMenu = true;
			},
			navigatoPage(item) {
				this.isShowMenu = false;
				
				uni.navigateTo({
					url: '/' + item.url + "?homeId=" + item.id
				})
			},
			//获取子目录
			getChildrenMenu(item) {
				if (item.childMenu.length == 0) {
					this.$api.post(this.$url.queryMenu, {
						menuLocation: 1,
						parentId: item.id
					}).then(res => {
						if (res.code == 200) {
							res.data.sort((a, b) => {
								return a.orderNum - b.orderNum
							})
							item.childMenu = res.data;
							item.showMenu = true;
						} else {
							this.$.msg(res.msg)
						}

					})
				} else {
					item.showMenu = !item.showMenu;
				}

			},
			//跳转子目录
			navigatoPageChild(item){
				this.isShowMenu = false;
				
				
				
				if(item.url =='pages/entrustedConsultation/entrustedConsultation'){
					uni.reLaunch({
						url:'/' + item.url
					})
				}else {
					uni.reLaunch({
						url: '/' + item.url + "?pageTitle=" +item.name+ "&pageType=1&homeId=" + item.id +"&parentId="+item.id + "&menuLocation=1",
					})
				}
			},
			//拨打客服电话
			tapMakePhoneCall(){
				let {uniPlatform}= this.$util.getDeviceInfo();//获取设备信息
				let payPlatform =""
				if(uniPlatform == 'mp-toutiao'){
					tt.makePhoneCall({
						 phoneNumber: this.customerTel,
						 success(res) {
						   // 调用成功 makePhoneCall:ok
						   console.log("调用成功", res.errMsg);
						 },
						 fail(res) {
						   // 调用失败 makePhoneCall:fail
						   console.log("调用失败", res.errMsg);
						 }, 
					   });
				}
				
				 
			},
			//订单列表
			navigatoPageOrderList(){
				if(uni.getStorageSync("token")){
				uni.reLaunch({
					url:'/pages/orderList/orderList'
				})	
				}else {
					this.showLoginPop = true;
				}
				
			},
			 
		}
	}
</script>

<style scoped>
	.public_header_logo {
		height: 110rpx;

	}

	.public_header {
		height: 120rpx;
		line-height: 120rpx;
		position: fixed;
		top: 0px;
		left: 0px;
		background-color: #fff;
		z-index: 9999;
		width: 100%;
		padding-left: 4%;
		padding-right: 0%;
		box-sizing: border-box;
		border-bottom: 1px solid #eaeaea;
	}


	/* ====== 移动端右边点击菜单按钮 start ======= */
	.mobleMenu_button {
		float: right;
		width: 120rpx;
		height: 120rpx;
		background: #0062e3;
		line-height: 120rpx;
		text-align: center;
	}

	.mobleLines_button {
		display: inline-block;
		padding: 0px;
		border: none;
		background-color: transparent;
		cursor: pointer;
		-webkit-transition: all .3s ease;
		-moz-transition: all .3s ease;
		-o-transition: all .3s ease;
		transition: all .3s ease;
		user-select: none;
		/* height: 60rpx;
		width: 40rpx; */
		font-weight: 700;
		font-size: 32rpx;
	}

	.mobleLines {
		position: relative;
		display: inline-block;
		width: 40rpx;
		height: 1px;
		background: #fff;
		-webkit-transition: all .3s ease;
		-moz-transition: all .3s ease;
		-o-transition: all .3s ease;
		transition: all .3s ease;
		transform: translateY(-10rpx);

	}

	.mobleLines:after,
	.mobleLines:before {
		position: absolute;
		left: 0px;
		display: inline-block;
		width: 40rpx;
		height: 1px;
		background: #fff;
		content: '';
		-webkit-transition: all .3s ease;
		-moz-transition: all .3s ease;
		-o-transition: all .3s ease;
		transition: all .3s ease;
		-webkit-transform-origin: 0px center;
		transform-origin: 0px center;
	}

	.mobleLines:before {
		top: 20rpx
	}

	.mobleLines:after {
		top: 40rpx
	}

	.mobleMenu_button:hover .mobleLines,
	.mobleMenu_button:hover .mobleLines:after,
	.mobleMenu_button:hover .mobleLines:before {
		background-color: #fff
	}

	.mobleMenu_button.on .mobleLines_button.x .mobleLines {
		background: 0 0
	}

	.mobleMenu_button.on .mobleLines_button.x .mobleLines:after,
	.mobleMenu_button.on .mobleLines_button.x .mobleLines:before {
		top: 0px;
		width: 60rpx;
		-webkit-transform-origin: 50% 50%;
		transform-origin: 50% 50%
	}

	.mobleMenu_button.on .mobleLines_button.x .mobleLines:before {
		background: #fff;
		-webkit-transform: rotate3d(0, 0, 1, 45deg);
		transform: rotate3d(0, 0, 1, 45deg);
		left: -10rpx;
	}

	.mobleMenu_button.on .mobleLines_button.x .mobleLines:after {
		background: #fff;
		-webkit-transform: rotate3d(0, 0, 1, -45deg);
		transform: rotate3d(0, 0, 1, -45deg);
		left: -10rpx;
	}

	/* ====== 移动端右边点击菜单按钮 end ======= */

	.menuLeft button,
	.menuLeft {
		font-size: 32rpx;
		width: 100%;
		color: #333;

		text-align: left;
	}

	.menuLeft {
		padding: 20rpx 4%;
		border-top: 1px solid #eaeaea;
	}

	.menuLeft_children>view {
		width: 100%;
		padding: 20rpx 0%;
		border-top: 1px solid #eaeaea;
	}

	.menuLeft>.menuLeft_children {
		margin-top: 20rpx;
	}

	.menuLeft_children>view button {
		padding-left: 4%;
		box-sizing: border-box;
	}

	
</style>